<script setup>
import { onMounted, ref, watch } from "vue";
import Swiper from "../components/home/swiper.vue";
import AllActivity from "../components/home/ActivityList.vue";
import { useRouter, useRoute } from "vue-router";
import api from "@/api/api.js";

const router = useRouter();
const tabActive = ref(0);
const searchValue = ref("");
const pageNum = ref(1);
const pageSize = ref(10);
const activityDataList = ref([]); // 搜索框全部活动筛选结果
const myEnrollDataList = ref([]); // 搜索框我的报名筛选结果

// 轮播项数据
const swiperList = ref([]);
const getSwiperList = async () => {
  await api.getBanner().then((res) => {
    swiperList.value = res;
  });
};
getSwiperList();

// 通用的数据获取函数
const fetchData = async (isMyEnroll = false, keywords = "") => {
  const params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    keywords: keywords,
  };

  try {
    const res = isMyEnroll
      ? await api.getMyEnroll(params)
      : await api.getAllActivity(params);
    if (isMyEnroll) {
      myEnrollDataList.value = res.data;
    } else {
      activityDataList.value = res.data;
    }
  } catch (error) {
    console.error('数据获取失败:', error);
  }
};

// 根据当前 tab 状态获取相应数据
const getCurrentTabData = async (keywords = "") => {
  await fetchData(tabActive.value === 1, keywords);
};

// 搜索处理
const onSearch = async (val) => {
  await getCurrentTabData(val);
};

// 清除搜索处理
const onClear = async () => {
  await getCurrentTabData(searchValue.value);
};

// 监听 tab 切换
watch(tabActive, async (newVal, oldVal) => {
  if (oldVal !== undefined) {
    // 避免初始化时触发
    await getCurrentTabData(searchValue.value);
  }
});

// 监听搜索值变化
watch(searchValue, (newVal, oldVal) => {
  if (oldVal && !newVal) {
    // 当搜索值从有到无时，重新加载数据
    getCurrentTabData(newVal);
  }
});


const handleLoadMore = async (params) => {
  const isMyEnroll = tabActive.value === 1;

  const requestParams = {
    pageNum: params.pageNum,
    pageSize: params.pageSize,
    keywords: searchValue.value
  };

  try {
    // 根据当前 tab 请求对应的数据
    const res = isMyEnroll
      ? await api.getMyEnroll(requestParams)
      : await api.getAllActivity(requestParams);

    if (isMyEnroll) {
      myEnrollDataList.value = [...myEnrollDataList.value, ...res.data];
    } else {
      activityDataList.value = [...activityDataList.value, ...res.data];
    }
  } catch (error) {
    console.error('数据加载失败:', error);
  }
};

onMounted(async () => {
  await fetchData(false, '');
})

</script>
<template>
  <div class="home-container">
    <header>
      <van-search v-model="searchValue" background="#f6f8f8" style="flex: 1" @search="onSearch" @clear="onClear" />
      <div class="img-box" @click="router.push('/contact')">
        <img src="../assets/icons/kf.png" alt="" />
      </div>
    </header>

    <main class="swiper-container" v-if="swiperList.length > 0">
      <Swiper :swiper_list="swiperList" />
    </main>

    <main class="tab-container" style="margin-top: 10px">
      <van-tabs v-model:active="tabActive" background="#f6f8f8" color="#4b79e3" title-inactive-color="black"
        title-active-color="#4b79e3" sticky>
        <van-tab title="全部活动">
          <AllActivity :data_list="activityDataList" @load-more="handleLoadMore" />
        </van-tab>
        <van-tab title="我的报名">
          <AllActivity :data_list="activityDataList" @load-more="handleLoadMore" />
        </van-tab>
      </van-tabs>
    </main>
  </div>
</template>
<style lang="less" scoped>
@import url("../styles/home/home");
</style>
